<template>
  <div class="chat-window">
    <div class="header">聊天窗口页面</div>
    
    <div class="messages">
      <div 
        v-for="msg in messList" 
        :key="msg.id"
        :class="['message', msg.senderId === senderId ? 'self' : 'other']"
      >
        <div class="content">{{ msg.content }}</div>
      </div>
    </div>
    
    <div class="input-area">
      <input 
        v-model="inputMessage" 
        @keyup.enter="sendMessage"
        placeholder="输入消息..."
      />
      <button @click="sendMessage">发送按钮</button>
    </div>
    
    <div class="footer">组长的底部导航栏</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import { default as io } from 'socket.io-client';

const route = useRoute();

// 当前用户信息
const senderId = ref(route.query.senderId as string || 'p111');
const senderType = ref(route.query.senderType as string || 'patient');

// 聊天相关数据
const roomId = ref(route.query.roomId as string || '123');
 
const inputMessage = ref('');
const messList = ref<any[]>([]);

let socket:any = null
/**
 * 连接Socket并加入房间
 */
function connectSocket() {
  socket = io('http://localhost:3000');
  console.log(roomId, );
  
  socket.on('history_messages',(messages:any[])=>{
    messList.value = messages
  })
  socket.on('connect', () => {
    console.log('Socket连接成功');
    joinRoom();
  });
  
  socket.on('receive_message', (message: { senderId: string; content: string }) => {
    console.log('收到新消息:', message);
    messList.value.push({
      id: Date.now(),
      senderId: message.senderId,
      content: message.content
    });
  });
}

/**
 * 加入聊天房间
 */
function joinRoom() {
  if (!socket) return;
  
  socket.emit('join_room', {
    senderId: senderId.value,
    senderType: senderType.value,
    roomId: roomId.value
  });
}

/**
 * 发送消息
 */
 
function sendMessage() {
  
  if (!inputMessage.value.trim() || !socket) return;
  
  socket.emit('send_message', {
    content: inputMessage.value,
    messageType: 'text'
  });
  
  // 本地添加消息
//   messages.value.push({
//     id: Date.now(),
//     senderId: currentUserId.value,
//     content: inputMessage.value
//   });
  
  inputMessage.value = '';
}

/**
 * 断开Socket连接
 */
function disconnectSocket() {
  if (socket) {
    socket.disconnect();
    socket = null;
  }
}

onMounted(() => {
  connectSocket();
});

onUnmounted(() => {
  disconnectSocket();
});
</script>

<style scoped>
.chat-window {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.header {
  padding: 16px;
  background: #f5f5f5;
  font-weight: bold;
}
.messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}
.message {
  margin-bottom: 12px;
}
.message.self {
  text-align: right;
}
.message.self .content {
  background: #d2f8d2;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
}
.message.other .content {
  background: #f5f5f5;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
}
.input-area {
  display: flex;
  padding: 16px;
  border-top: 1px solid #eee;
}
.input-area input {
  flex: 1;
  margin-right: 8px;
  padding: 8px;
}
.footer {
  padding: 16px;
  background: #f5f5f5;
  text-align: center;
  color: #666;
}
</style>